<template>
  <div class="choose-hotel">
    <el-select size="mini" v-model="hotelId"
                   filterable
                   :filter-method="pinyingMatch"
                   placeholder="选择切换酒店" @focus="getHotelIdName" @change="changeHotel">
          <el-option
            v-for="item in hotelIdNameList"
            :key="item.id"
            :label="item.hotelName"
            :value="item.id">
          </el-option>
        </el-select>
  </div>
</template>

<script>
  import {deepClone} from "@/utils/index";
  import pinyinMatch from "pinyin-match";
  import {setCurrentHotel,getCurrentHotel} from "@/utils/hotel"


export default {
  name:'HotelChoose',
  components: {  },
  props:['chosenId'],
  data() {
    return {
       // 酒店hotelId和hotelName集合
       hotelIdNameList:[],
        // 复制酒店list
        copyHotelList: [],
        hotelId:''
    }
  },
  created() {
    this.getHotelIdName()
  },
  computed: {
     
  },
  methods: {
    changeHotel(){
        this.$emit('update:chosenId',this.hotelId)
        this.$emit('change',this.hotelId)
    },
   /** 查询酒店hotelId 和hotelName */
    getHotelIdName() {
        this.hotelIdNameList = [];
        this.copyHotelList = [];
        this.loading = false
    },
    //下拉框设置拼音模糊搜索
    pinyingMatch(val){
      if(val){
        var result = []
        //
        this.copyHotelList.forEach( e => {
          var m = pinyinMatch.match(e.hotelName, val)
          if( m){
            result.push(e)
          }
        })
        //搜索到相应的数据就把符合条件的n个数据赋值brand
        this.hotelIdNameList = result
      }else{
        //没有搜索到数据，就还展示所有的brand
        this.hotelIdNameList = this.copyHotelList
      }
    },
  },
  watch:{
    chosenId(val){
      this.hotelId = val
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer-container {
  padding: 24px;
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;

  .drawer-title {
    margin-bottom: 12px;
    color: rgba(0, 0, 0, .85);
    font-size: 14px;
    line-height: 22px;
  }

  .drawer-item {
    color: rgba(0, 0, 0, .65);
    font-size: 14px;
    padding: 12px 0;
  }

  .drawer-switch {
    float: right
  }
}
</style>
